<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/index.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <div class="nav"style="height:600px;width:200px;background-color:black;">
        <ul>
            <li>
                <a href="#"style="text-align:center;padding:0px;">
                    <cite>送水管理系统</cite>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="glyphicon glyphicon-home i"></span>
                    <cite id='client_info'>客户信息管理</cite>
                </a>
            </li>
            <li>
                <a href="#"class="nav-li-a">
                    <i class=""></i>
                    <cite id="worker_info">送水工信息管理</cite>
                    <!-- <i class="toggle 1 glyphicon glyphicon-triangle-bottom"></i>
                    <i class="toggle 2 top glyphicon glyphicon-triangle-top"></i> -->
                </a>
            </li>
            <li>
                <a href="#"class="nav-li-a">
                    <i class="glyphicon glyphicon-list-alt"></i>
                    <cite id="admin_order">订单信息</cite>
                    
                </a>
             </li>
             <li>
                <a href="#"class="nav-li-a">
                    <i class="glyphicon glyphicon-list-alt"></i>
                    <cite id="admin_examine">订单审核</cite>
                    
                </a>
             </li>

            <li>
                <a href="#">
                    <i></i>
                    <cite id="history">送水历史管理</cite>
                </a>
            </li>
            <li>
                <a href="#">
                    <i></i>
                    <cite id="fare">工资管理</cite>
                </a>
            </li>
            <li>
                <a href="#">
                    <i></i>
                    <cite id="purify_water">纯净水管理</cite>
                </a>
            </li>
            <li>
                <a href="#">
                    <i></i>
                    <cite id="supplier">供应商管理</cite>
                </a>
            </li>
        </ul>
    </div>
    <div class="box-right"style="left:200px;font:16px 'Microsoft YaHei',sans-serif;color:white;">
        <div class=" header container">
            <div class="row">
                <ul class="col-xs-12">
                    <li class="col-xs-1 menu">
                        <i><span class="glyphicon glyphicon-align-justify"></span></i>
                    </li>
                    <li class="col-xs-1">
                        <i class="iconfont" style="font-size: 18px;color:white;"></i>
                    </li>
                    <li class="col-xs-2 col-xs-offset-8">
                        <div class="">
                            <div type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                              {{request.session.info.name}} <span class="caret"></span>
                            </div>
                            <ul class="dropdown-menu">
                                <li><a href="#">修改密码</a></li>
                                <li><a href="#">基本资料</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="/logout">注销</a></li>
                              </ul>
                        </div>
                    </li>
                </ul>
            </div>
    
        </div> 
        <div class="left">
            <iframe src="{% url 'client_info' %}" height="800px" width="100%" scrolling="no" border="0" frameborder="0" align="left"></iframe>
         
        </div>
    </div>
    
</div>
      
</body>
</html>
<script src='/static/js/jquery-3.6.0.min.js'></script>
<script src='/static/js/bootstrap.min.js'></script>
<script>
    var count=0
    $(document).ready(function(){
        $(".box-right ul li:first").click(function(){
            count=count+1;
            if(count%2==1){
                $('.nav').addClass('cancel1');
                $('.box-right').addClass('move1').addClass("widthen");
                $('.nav').removeClass('cancel2');
                $('.box-right').removeClass('move2');
            } 
         
           
           if(count%2==0){
            $('.nav').addClass('cancel2');
            $('.box-right').addClass('move2');
            $('.nav').removeClass('cancel1');
            $('.box-right').removeClass('move1');
           }
           
        });
        $('.nav ul li:nth-child(3) a').first().click(function(){
            $('.nav ul li:nth-child(3) dl').toggleClass('current');
            $('.nav ul li:nth-child(3) .toggle.1').toggleClass('bottom');
            $('.nav ul li:nth-child(3) .toggle.2').toggleClass('top');
        });
        $('.nav ul li:nth-child(4) a').first().click(function(){
            $('.nav ul li:nth-child(4) dl').toggleClass('current');
            $('.nav ul li:nth-child(4) .toggle.1').toggleClass('bottom');
            $('.nav ul li:nth-child(4) .toggle.2').toggleClass('top');
        });
        $('#client_info').click(function(){
            $('iframe').attr('src',"{% url 'client_info' %}");
        });
        $('#admin_examine').click(function(){
           
           $('iframe').attr('src',"{% url 'admin_examine' %}");
       });

       
        $('#worker_info').click(function(){
           
            $('iframe').attr('src',"{% url 'worker_info' %}");
        });
        $('#history').click(function(){
           
           $('iframe').attr('src',"{% url 'history' %}");
       });
       $('#fare').click(function(){
           
           $('iframe').attr('src',"{% url 'fare' %}");
       });     
    
       $('#purify_water').click(function(){
           
           $('iframe').attr('src',"{% url 'purify_water' %}");
       });
       $('#supplier').click(function(){
           
           $('iframe').attr('src',"{% url 'supplier' %}");
       });
       $('#admin_order').click(function(){
           
           $('iframe').attr('src',"{% url 'admin_order' %}");
       });
       
    })
</script>

